<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 内置构造函数  Proxy(代理原始对象,配置项)

        const p1 = {
            name: '张三',
            age: 18,
            address: {
                city: '北京',
                desc:{
                    a:1,
                    b:2
                }
            },
            hobby:['吃饭','睡觉','打豆豆']
        }


        const result = new Proxy(p1,{
            get(target,key){
                // target 代理的目标对象   上面的p1
                // key 代理的目标对象的属性名 自动挨个遍历
                console.log('你尝试获取数据');
                return target[key];
            },
            set(target,key,val){
                // target 代理的目标对象   上面的p1
                // key 代理的目标对象的属性名 自动挨个遍历
                // val 你想修改的属性对应的值
                console.log('你尝试修改数据');
                target[key] = val;
                return true;
                // 简单代理需要返回true
            }
        })

        console.log('原始数据',p1);
        console.log('代理的结果',result);
        console.log('代理的结果 name',result.name);

        result.name = '关瑞';

        console.log('原始数据',p1);
        console.log('代理的结果',result);
        console.log('代理的结果 name',result.name);

        result.gender = '女';
        console.log('原始数据',p1);
        console.log('代理的结果',result);
        console.log('代理的结果 name',result.gender);


    </script>
</body>
</html>